<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Menu - Async</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <script type="module">
      import { menuController } from '../../../../dist/ionic/index.esm.js';
      window.menuController = menuController;
    </script>
  </head>

  <body>
    <ion-app>
      <div id="menu-container">
        <ion-menu content-id="main">
          <ion-content class="ion-padding"> Menu Content </ion-content>
        </ion-menu>
      </div>

      <div class="ion-page" id="main">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu - Async</ion-title>
            <ion-buttons slot="start" id="buttons-container"></ion-buttons>
          </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding">
          Main Content
          <button onclick="trigger()" id="trigger">Add Menu To DOM</button>
        </ion-content>
      </div>
    </ion-app>

    <script>
      const buttons = document.querySelector('ion-buttons');
      const menuButton = document.createElement('ion-menu-button');
      const menu = document.querySelector('ion-menu');
      const menuContainer = document.querySelector('#menu-container');

      let firstLoad = true;

      // When the menu loads, immediately remove it from the DOM
      document.body.addEventListener('ionMenuChange', () => {
        if (firstLoad) {
          menuContainer.removeChild(menu);
          buttons.appendChild(menuButton);
          firstLoad = false;
        }
      });
      const trigger = () => {
        menuContainer.append(menu);
      };
    </script>
  </body>
</html>
